<template>
	<div class="grid-layout-container">
        <el-card class="box-card">
			<template #header>
				<div class="homeQueryBox flex-startCenter">
					<span class="mr10 personal-edit-title">最新动态</span>
					<!-- <el-radio-group v-model="state.status" class="mr10">
						<el-radio-button :label="1">全部</el-radio-button>
						<el-radio-button :label="2">直营</el-radio-button>
						<el-radio-button :label="3">加盟</el-radio-button>
					</el-radio-group> -->
					<section class="width280" style="visibility: hidden;">
						<DatePickerBox />
					</section>
				</div>
			</template>
			<section style="height: 400px;">
				<div class="personal-info-box px15">
					<ul class="personal-info-ul">
						<li v-for="(v, k) in state.newsInfoList" :key="k" class="personal-info-li font15">
							<a :href="v.link" target="_block" class="personal-info-li-title font15">{{ v.title }}</a>
						</li>
					</ul>
				</div>
			</section>
		</el-card>
	</div>
</template>

<script setup lang="ts" name="funGridLayout">
import { reactive } from 'vue';

// 定义变量内容
const state = reactive({
	newsInfoList: [
		{
			title: '[发布] 2021年02月28日发布基于 vue3.x + vite v1.0.0 版本',
			date: '02/28',
			link: 'https://gitee.com/lyt-top/vue-next-admin',
		},
		{
			title: '[发布] 2021年04月15日发布 vue2.x + webpack 重构版本',
			date: '04/15',
			link: 'https://gitee.com/lyt-top/vue-next-admin/tree/vue-prev-admin/',
		},
		{
			title: '[重构] 2021年04月10日 重构 vue2.x + webpack v1.0.0 版本',
			date: '04/10',
			link: 'https://gitee.com/lyt-top/vue-next-admin/tree/vue-prev-admin/',
		},
		{
			title: '[预览] 2020年12月08日，基于 vue3.x 版本后台模板的预览',
			date: '12/08',
			link: 'http://lyt-top.gitee.io/vue-next-admin-preview/#/login',
		},
		{
			title: '[预览] 2020年11月15日，基于 vue2.x 版本后台模板的预览',
			date: '11/15',
			link: 'https://lyt-top.gitee.io/vue-prev-admin-preview/#/login',
		},
	],
	layouts: [
		{ x: 0, y: 0, w: 1, h: 1, i: '最新动态' },
	],
});
</script>

<style scoped lang="scss">
@import '/@/theme/mixins/index.scss';

.grid-layout-container {
	.box-card :deep(.el-card__header){
		padding: 10px 10px !important;
	}
	.box-card :deep(.el-card__body){
	}
	.box-card :deep(.el-card__body){
		padding: 0px !important;
	}
	.personal-edit-title {
		position: relative;
		padding-left: 10px;
		color: var(--el-text-color-regular);
		line-height: 22px;
		&::after {
			content: '';
			width: 4px;
			height: 18px;
			line-height: 22px;
			position: absolute;
			left: 0;
			top: 50%;
			transform: translateY(-50%);
			background: var(--el-color-primary);
			border-radius: 2px;
		}
	}
	.personal-info-box {
		overflow: hidden;
		.personal-info-ul {
			list-style: none;
			.personal-info-li {
				padding-bottom: 10px;
				.personal-info-li-title {
					display: inline-block;
					@include text-ellipsis(1);
					color: var(--el-text-color-secondary);
					text-decoration: none;
				}
				& a:hover {
					color: var(--el-color-primary);
					cursor: pointer;
				}
			}
		}
	}
}
</style>
